<template>
    <div class="cc-button-div" :style="styleInfo">
        <button :class="classInfo" class="cc-button pure-button" @click="_click"><slot></slot></button>
    </div>
    
    <!-- <el-button :size="size" @click="_click" type="primary">
        <slot></slot>
    </el-button> -->
    
</template>

<script>
module.exports = {
    data: function() {
        var getWidth = function(data) {
            if(data.full != null) {
                return "100%";
            }
        };
        return {
            styleInfo: {
                'width': getWidth(this)
            },
            classInfo: {},
        }
    }, 
    computed: {
        size() {
            return 'mini'
        }
    },
    created() {
        this.classInfo = {
            'full': this.full == true,
            'blue' : this.blue == true,
            'green': this.green == true,
            'red ' : this.red == true,
            'orange' : this.orange == true,
            'xsmall' : this.xsmall == true,
            'small' : this.small == true,
            'large' : this.large == true,
            'xlarge' : this.xlarge != null
        }
        var c = this.classInfo;
        if(!(c.xsmall || c.small || c.large || c.xlarge)) {
            c.xsmall = true;
        }
    },
    props: {
        full: '', // 传递的参数会覆盖此值
        green: '',
        red: '',
        orange: '',
        blue: '',
        xsmall: '',
        small: '',
        large: '',
        xlarge: ''
    },
    methods: {    
        _click: function() {
            this.$emit('click', function() { 
                alert('inner');
            });
        }
    } 
}
</script>

<style lang="less">
.cc-button-div {
    display: inline-block;

a {
    color:white;
    background: rgb(66, 184, 221); /* 默认蓝色 */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
button {
    color:white;
    background: rgb(66, 184, 221); /* 默认蓝色 */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.full{
    width: 100%;
}

.green {
    background: rgb(28, 184, 65); /* this is a green */
}

.red, .maroon {
    background: rgb(202, 60, 60); /* this is a maroon */
}

.orange {
    background: rgb(223, 117, 20); /* this is an orange */
}

.blue {
    background: rgb(66, 184, 221); /* this is a light blue */
}

.xsmall {
    font-size: 70%;
}

.small {
    font-size: 85%;
}

.large {
    font-size: 110%;
}

.xlarge {
    font-size: 125%;
}

}
</style>